<!--
 * @Author: wangzhongjie
 * @Date: 2019-08-09 08:58:20
 * @LastEditors: wangzhongjie
 * @LastEditTime: 2020-05-09 08:35:06
 * @Description: 
 * @Email: uvdream@163.com
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>可拖拽的</title>
  </head>
  <style>
    body,
    html {
      margin: 0;
    }

    .main {
      width: 300px;
      height: 400px;
      outline: 1px solid red;
      margin-left: 20px;
      position: relative;
    }

    #div {
      width: 100px;
      height: 100px;
      border: 1px solid orange;
      position: absolute;
    }

    .edit {
      position: relative;
      left: 0px;
      width: 100%;
      height: 100%;
    }

    .edit-shape-point {
      display: none;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border: 1px solid #59c7f9;
      border-radius: 10px;
      position: absolute;
    }
  </style>

  <body>
    <div class="main" id="main">
      <div id="div">
        <div class="edit">
          <div
            class="edit-shape-point"
            style="left: -5px; top: -5px; cursor: nw-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="left: -5px; bottom: -5px; cursor: sw-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="right: -5px; top: -5px; cursor: ne-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="right: -5px; bottom: -5px; cursor: se-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="left: -5px; top: 45px; cursor: w-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="right: -5px; top: 45px; cursor: e-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="top: -5px; left: 45px; cursor: n-resize;"
          ></div>
          <div
            class="edit-shape-point"
            style="bottom: -5px; left: 45px; cursor: s-resize;"
          ></div>
        </div>
      </div>
    </div>
  </body>
  <!-- <script src="./index.js"></script> -->
  <script>
    // 获取元素
    var moveBox = document.getElementById("div");
    var main = document.getElementById("main");
    // 是否可以移动
    var isMove = false;
    // 是否可以改变大小
    var isDrag = false;
    // 双击事件
    moveBox.onclick = function () {
      moveBox.style.border = "1px dashed black";
      document.querySelectorAll(".edit-shape-point").forEach((element) => {
        element.style.display = "block";
      });
      moveBox.style.cursor = "default";
      isMove = false;
    };

    // 鼠标按下
    moveBox.onmousedown = function (e) {
      isMove = true;
      moveBox.style.cursor = "move";
      let startX = e.offsetX;
      let startY = e.offsetY;
      move(startX, startY);
    };
    move = function (startX, startY) {
      moveBox.onmousemove = function (evt) {
        if (isMove) {
          // x位置
          let moveX = moveBox.offsetLeft + evt.offsetX - startX;
          // Y位置
          let moveY = moveBox.offsetTop + evt.offsetY - startY;
          moveX <= main.offsetWidth - moveBox.offsetWidth + 2 && moveX >= 0
            ? (moveBox.style.left = moveX + "px")
            : null;
          moveY <= main.offsetHeight - moveBox.offsetHeight + 2 && moveY >= 0
            ? (moveBox.style.top = moveY + "px")
            : null;
        }
      };
    };
    // 鼠标松下
    moveBox.onmouseup = function () {
      moveBox.style.cursor = "default";
      isMove = false;
    };

    // 鼠标离开
    moveBox.onmouseout = function () {
      isMove = false;
    };
  </script>
</html>
